<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Toast</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Toast</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content" padding>
        <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
        <ion-button expand="block" onclick="presentToast('top')">Show Toast Top</ion-button>
        <ion-button expand="block" onclick="presentToast('middle')">Show Toast Middle</ion-button>
        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</ion-button>
        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>

        <ion-toast-controller></ion-toast-controller>

        <ion-grid>
          <ion-row>
            <ion-col col-6>
              <f class="red"></f>
            </ion-col>
            <ion-col col-6>
              <f class="green"></f>
            </ion-col>
            <ion-col col-6>
              <f class="blue"></f>
            </ion-col>
            <ion-col col-6>
              <f class="yellow"></f>
            </ion-col>
            <ion-col col-6>
              <f class="pink"></f>
            </ion-col>
            <ion-col col-6>
              <f class="purple"></f>
            </ion-col>
            <ion-col col-6>
              <f class="black"></f>
            </ion-col>
            <ion-col col-6>
              <f class="orange"></f>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>

  </ion-app>
  <script>
    window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
    window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})

    async function presentToast(position) {
      const toastController = document.querySelector('ion-toast-controller');
      await toastController.componentOnReady();
      const toastElement = await toastController.create({
        message: 'Hellooo',
        position,
        duration: 2000
      });
      return await toastElement.present();
    }

    async function presentToastWithOptions(opts) {
      const toastController = document.querySelector('ion-toast-controller');
      await toastController.componentOnReady();
      const toastElement = await toastController.create(opts);
      return await toastElement.present();
    }
  </script>

  <style>
    f {
      display: block;
      background: blue;

      width: 100%;
      height: 200px;
      margin: 20px auto;
    }

    .red {
      background-color: #ea445a;
    }

    .green {
      background-color: #76d672;
    }

    .blue {
      background-color: #3478f6;
    }

    .yellow {
      background-color: #ffff80;
    }

    .pink {
      background-color: #ff6b86;
    }

    .purple {
      background-color: #7e34f6;
    }

    .black {
      background-color: #000;
    }

    .orange {
      background-color: #f69234;
    }

  </style>
</body>

</html>
